<template>
  <div class="myspread">
    <!-- 头部 -->
    <div class="my_header">
      <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="$router.back(-1)"></i>
      <div class="top1">我的分享</div>
    </div>

    <div class="list">
      <div class="info">
        <div class="infor" v-for="(item,index) in myPromotionList" :key="index">
          <div>昵称：<span class="xinxi">{{item.name}}</span></div>
          <div>下级级别：<span class="xinxi">{{item.level}}</span></div>
          <div>注册时间：<span class="xinxi">{{item.add_time}}</span></div>
          <div id="detail">
            <ul class="cont">
              <li @click="checkDetail(item.user_id,item.level_type)" class="blue" style="writing-mode:tb-rl;">
                　提成明细
              </li>
            </ul>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        myPromotionList: [],
      };
    },
    created() {
      this.getMyPromotionList();
    },
    methods: {
      getMyPromotionList() {   //获取我的推广列表
        $.ajax({
          type: "get",
          url: "http://zcapi.hrgsxt.cn/api/User_spread/lists",
          data: {
            token: localStorage.getItem("token"),
            page: 0,
            num: 100,
            s_time: "",
            e_time: "",
            type: ''
          },
          cache: false,
          dataType: "json",
          success: response => {
            console.log('>>>>>', response);
            if (response.code == 200) {
              this.myPromotionList = response.data.spread;
            }
          }
        });
      },
      checkDetail(id,type) {  //查看详情
        this.$router.push({name: 'MySpreadDetail', params: {id: id,type:type}});
      },

    }

  };
</script>
<style scoped>
  .myspread .van-tabs__line {
    color: #0085F0 !important;
  }

  .list-content {
    overflow: scroll;
  }

  .my_header {
    width: 100%;
    height: .88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: .88rem;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 .3rem;
    z-index: 1
  }

  .my_header i {
    font-size: .4rem;
    float: left;
    line-height: .88rem;
  }

  .myspread .top1 {
    display: inline-block;
  }

  /*
    列表样式
  */

  .blue {
    color: rgba(0, 133, 240, 1);
  }

  .list {
    margin-top: .90rem;
  }

  .info {
    margin-top: .23rem;
    position: relative;
    border: .001rem dashed #efefef;
  }

  .infor {
    width: 92%;
    height: 2.2rem;
    line-height: .6rem;
    background-color: #fff;
    border: .01rem solid #E2E2E2;
    margin: 0 auto;
    padding: .2rem;
    position: relative;
  }

  .infor div {
    height: .6rem;
    font-size: .26rem;
    color: #999;
  }

  .infor .xinxi {
    color: #333;
  }

  /* 查看详情 */

  #detail {
    width: .64rem;
    height: 2.2rem;
    position: absolute;
    right: 0;
    top: 0;
    border-left: .001rem solid #E2E2E2;
  }

  #detail .cont {
    font-size: .26rem;
  }

  #detail .cont li {
    font-size: .24rem;
    line-height: .26rem;
    padding: .2rem .2rem .31rem .2rem;
  }
</style>
